<template>
    <div class="container">
      <div class="headCont">
          <div class="logoCont">
            <img src="static/img/logo.png" />
            <div class="logoText">
              <div class="logoName">同橙优享</div>
              <div class="logoEng">Enjoy with orange</div>
            </div>
          </div>
          <div class="navCont">
            <div :class="navId==index?'navItem navItemActive':'navItem'" @click="navFn(item)" :key="index" v-for="(item,index) in navArr">
              <div>{{item.val}}</div>
              <div v-if="navId==index" class="navLine"></div>
              <div v-if="navId!=index" class="navLine_no"></div>
            </div>
            <div class="telCont">
              <div class="telNum">
                <div class="iconfont icon-24gl-phone24h"></div> 
                <div>18483613963</div>
              </div>
            </div>
          </div>
      </div>
      <div class="bannerCont">
        <div class="bannerMask">
          <div class="maskLeft">
            <div class="maskTitle">上门按摩，独享市场！</div>
            <div class="maskdes">解锁城市按摩市场，独家运营权等你拿！</div>
            <div class="maskVal">
              <p>在繁忙的都市生活中，放松身心已成为追求健康的必然选择。</p>
              <p>我们独家推出的上门按摩、线上预约软件！每个城市只出售给一个创业者，绝对无竞争，让您独享市场红利，成就您的创业传奇！</p>
            </div>
            <a href="#JoinInput" class="maskBtn">申请资格</a>
          </div>
          <img src="static/img/bannerImg3.png" />
        </div>
      </div>
      <div class="productCont">
        <div class="contName">
          <div class="contName_china">同城按摩-产品展示</div>
          <div class="contName_Eng">Product display</div>
        </div>
        <div class="rowNavCont">
          <div @click="rowNavFn(item)" :class="item.id==rowNavId?'rowNavItem rowNavActive':'rowNavItem'" :key="index" v-for="(item,index) in rowNavArr">{{ item.val }}</div>
          <div class="rowNavLine" :style="'left: '+rowNavId*300+'px'"></div>
        </div>
        <div class="productMain">
          <div class="productNav">
            <div @click="productNavFn(index)" :class="productNavId==index?'productNavItemActive':'productNavItem'" :key="index" v-for="(item,index) in productNavArr">
              <img :src="item.img" />
              <div class="productNavName">{{item.val}}</div>
            </div>
          </div>
          <div class="productSwiper">
            <div class="productItem" v-if="!rowNavArr[rowNavId].isPc">
              <div class="phoneBox">
                <img class="phoneImg" src="static/img/phoneImg.png" />
                <div class="productImgCont">
                  <img class="productImg" :src="productNavArr[productNavId].goodsImg" />
                </div>
              </div>
              <div class="phoneBox" v-if="productNavArr[productNavId].detailImg">
                <img class="phoneImg" src="static/img/phoneImg.png" />
                <div class="productImgCont">
                  <img class="productImg" :src="productNavArr[productNavId].detailImg" />
                </div>
              </div>
              <div class="productInfo">
                <div class="productInfoName">{{productNavArr[productNavId].val}}</div>
                <div class="productInfoDes">
                  <ul>
                    <li :key="index" v-for="(item,index) in productNavArr[productNavId].desArr">{{ item.val }}</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="productItem PCProduct" v-if="rowNavArr[rowNavId].isPc">
              <div class="">
                <div class="productInfoName">{{productNavArr[productNavId].val}}</div>
                <div class="productInfoDes">
                  <ul>
                    <li :key="index" v-for="(item,index) in productNavArr[productNavId].desArr">{{ item.val }}</li>
                  </ul>
                </div>
              </div>
              <div class="PCFlex">
                <div class="PCBox">
                  <img class="PCImg" src="static/img/PCImg2.png" />
                  <div class="PCProductImg">
                    <img class="productImg" :src="productNavArr[productNavId].goodsImg" />
                  </div>
                </div>
                <div class="PCBox" v-if="productNavArr[productNavId].detailImg">
                  <img class="PCImg" src="static/img/PCImg2.png" />
                  <div class="PCProductImg">
                    <img class="productImg" :src="productNavArr[productNavId].detailImg" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="productCont hasBg" style="margin-top: 100px;">
        <div class="contName">
          <div class="contName_china">上门按摩前景</div>
          <div class="contName_Eng">Product prospect</div>
        </div>
        <div class="goodCont">
          <div class="goodItem" :key="index" v-for="(item,index) in goodArr">
            <img class="goodImg" :src="item.img" />
            <div class="goodText">
              <div class="goodName">
                <div class="goodLine"></div>
                <div>{{ item.name }}</div>
              </div>
              <div class="goodDes">{{ item.des }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="productCont" style="margin-top: 100px;">
        <div class="contName">
          <div class="contName_china">订单流程图</div>
          <div class="contName_Eng">Order flow chart</div>
        </div>
        <div class="orderStep">
          <img src="static/img/stepImg3.png" />
        </div>
      </div>
      <div class="productCont hasBg" style="margin-top: 100px;">
        <div class="contName">
          <div class="contName_china">产品特点</div>
          <div class="contName_Eng">Product characteristics</div>
        </div>
        <div class="portCont">
          <div class="portItem" :key="index" v-for="(item,index) in portArr">
            <div class="portMask">
              <div class="portBtn">开通同城按摩</div>
            </div>
            <div class="portImg">
              <img :src="item.img" />
            </div>
            <div class="portName">{{ item.name }}</div>
            <div class="portDes">{{ item.des }}</div>
          </div>
        </div>
      </div>
      <div class="productCont" style="margin-top: 100px;">
        <div class="contName">
            <div class="contName_china">运营指南</div>
            <div class="contName_Eng">Operation guide</div>
        </div>
        <div class="stepCont">
            <div class="stepItem" :key="index" v-for="(item,index) in stepArr">
            <div class="stepImg">
                <img :src="item.img" />
            </div>
            <div class="stepInfo">
                <div class="stepName">{{ item.name }}</div>
                <div class="stepVal">
                <ul>
                    <li :key="b" v-for="(a,b) in item.arr">{{ a.val }}</li>
                </ul>
                </div>
            </div>
            </div>
        </div>
      </div>
      <div class="productCont" id="JoinInput" style="margin-top: 100px;">
        <div class="contName">
            <div class="contName_china">开通《同城按摩》</div>
            <div class="contName_Des">如果您对我们的产品感兴趣，想在自己的城市开展《同城按摩》项目。填写以下信息，我们将第一时间与您取得联系！</div>
        </div>
        <div class="sendCont">
            <div class="inputCont">
                <input type="text" placeholder="请输入您的姓名" />
            </div>
            <div class="inputCont">
                <input type="number" placeholder="请输入您的电话" />
            </div>
            <div class="subBtn">快速申请</div>
        </div>
      </div>
      <foot-com></foot-com>
    </div>
  </template>
  
  <script>
  import topCom from '@/components/topCom';
  import footCom from '@/components/footCom';
  export default {
    components: {topCom,footCom},
    data() {
      return {
        navArr:[
          {val:'同城家教',url:'/home'},
          {val:'同城家政',url:'/clean'},
          // {val:'同城按摩',url:'/tech'},
        ],
        navId:2,
        rowNavArr:[
          {val:'用户端',id:0,arr:[
            {img:'static/img/homeIcon.png',val:'按摩首页',goodsImg:'static/img/techHome.png',desArr:[
            {val:'引领同城按摩新时代：轮播图汇聚一对一家政宣传，技师及商务合作招募。'},
              {val:'最新动态：最新公告信息，实时更新，让您第一时间获取平台动态。'},
              {val:'首页标签：爽约包赔、在线客服、质量保障、隐私保护等关键词标签。'},
              {val:'套餐列表：价格公开明细、无隐藏消费、套餐销量及好评展示。'},
            ]},
            {img:'static/img/detailIcon.png',val:'项目套餐',goodsImg:'static/img/techDetail.png',detailImg:'static/img/techDetail2.png',desArr:[
                {val:'项目套餐：详细展示各按摩项目套餐收费及时常情况。'},
              {val:'服务时间：展示最早可服务时间。'},
              {val:'服务内容：展示出每个套餐服务的具体内容细节。'},
              {val:'下单须知：用户下单须知温馨提示、取消订单告知、平台赔付规则、预约流程展示。'},
              {val:'套餐评价：展示出已购用户的好评，为其他用户做分析选择。'},
              {val:'预约下单：客户选择自己所需的套餐及心仪的技师进行下单。'},
            ]},
            {img:'static/img/girlIcon.png',val:'技师列表',goodsImg:'static/img/techTech.png',detailImg:'static/img/techTech2.png',desArr:[
              {val:'技师列表：展示每一位技师的基本信息，包含：技师年龄、性别、服务单数、技师好评。'},
              {val:'收藏技师：用户可收藏心仪技师，方便下次直接预约。'},
              {val:'立即预约：用户可在技师列表直接选择心仪技师进行预约，选择需要服务的套餐快速下单'},
            ]},
            {img:'static/img/payOrderIcon.png',val:'支付订单',goodsImg:'static/img/techPayOrder.png',detailImg:'static/img/techPayOrder2.png',desArr:[
                {val:'灵活下单，价格透明：订单套餐信息清晰呈现，包括总金额、套餐服务时长、价格等，让您轻松了解订单费用，价格透明无隐忧。'},
              {val:'个性化需求，一键填写：下单信息填写简便快捷，涵盖服务地址、门牌号、联系电话等。'},
              {val:'时间灵活，随心安排：预约服务日期和时间选择自由灵活，让您按照自己的时间安排技师服务。'},
              {val:'特惠优惠，尽享实惠：可填写邀请码，享受特别优惠，让您的按摩服务更加划算。'},
            ]},
            {img:'static/img/orderIcon.png',val:'用户订单',goodsImg:'static/img/techOrder.png',detailImg:'static/img/techOrder2.png',desArr:[
                {val:'订单列表展示：清晰展示订单列表，每个订单内容信息尽在掌握。'},
              {val:'订单搜索：订单可搜索，可选择不同类型搜索，让您快速定位所需订单，节省时间提高效率。'},
              {val:'订单状态：订单不同状态展示，让您清晰了解订单处理情况，随时跟进按摩服务进程。'},
              {val:'一键支付，便捷快速：支持订单立即支付操作，让您轻松完成支付。'},
              {val:'订单管理灵活操作：支持订单删除操作、取消订单操作，让您灵活管理订单。'},
              {val:'订单详情：订单详情页面展示完整的订单信息资料，让您深入了解每个订单的具体内容。'},
              {val:'核销码：订单详情页面展示了待服务订单的核销码，便于工作人员上门时出示进行订单核销。'},
            ]},
            {img:'static/img/ctrlIcon.png',val:'订单操作',goodsImg:'static/img/techOrder3.png',detailImg:'static/img/techOrder4.png',desArr:[
                {val:'订单举报：订单举报操作，填写举报内容，上传举报凭证，为您提供安全可靠的举报渠道，保障您的权益。'},
              {val:'订单评价：订单评价操作，上传评价图，分享您的按摩体验，评价内容真实客观，评价分数清晰明了，共同促进按摩服务的提升。'},
            ]},
            {img:'static/img/userIcon.png',val:'个人中心',goodsImg:'static/img/techUser.png',detailImg:'static/img/techUser2.png',desArr:[
                {val:'用户账号信息清晰展示：个人信息、订单统计、消费统计一目了然，方便您随时查看自己的订单情况。'},
              {val:'消费明细：消费类型包括消费和退款两种，每笔消费金额、订单号、消费时间清晰记录，让您对消费情况了如指掌。'},
            ]},
            {img:'static/img/joinIcon.png',val:'招募合作',goodsImg:'static/img/techJoin.png',detailImg:'static/img/techJoin2.png',desArr:[
                {val:'保洁员招募：通过平台发布技师招募需求，更快速便捷招募到兼职技师。'},
              {val:'商务合作：通过平台寻找有意向合作伙伴。'},
            ]},
          ]},
          {val:'技师端',id:1,arr:[
            {img:'static/img/loginIcon.png',val:'技师登录',goodsImg:'static/img/techLogin.png',desArr:[
                {val:'技师登录：技师可通过自己的手机号和密码登录到管理系统，随时进行接单操作。'},
              {val:'招募技师信息：灵活的工作时间安排、丰厚的报酬待遇。'},
            ]},
            {img:'static/img/moneyIcon.png',val:'资金管理',goodsImg:'static/img/techSub.png',detailImg:'static/img/techSub2.png',desArr:[
                {val:'提现展示：可提现金额展示，提现条件说明。'},
              {val:'申请提现：一键申请提现，流程简单快捷，后台审核通过即可打款。'},
              {val:'资金明细：记录每一笔资金来源、订单号、金额、日期等，记录您的资金流动，方便查阅核对。'},
              {val:'提现记录：记录每一笔提现信息，包括提现状态、提现时间、提现金额、提现订单号。'},
            ]},
            {img:'static/img/orderIcon.png',val:'接单记录',goodsImg:'static/img/techRecordOrder2.png',detailImg:'static/img/techRecordOrder.png',desArr:[
                {val:'接单记录：浏览您的历史接单记录，每一笔接单的情况全在此。'},
              {val:'日期筛选：可通过日期查询快速筛选出对应日期下的接单记录情况。'},
              {val:'订单状态：不同的订单状态，待服务状态靠前，随时查看即将要服务的订单'},
              {val:'待接单操作：用户选择技师下单之后，技师会收到待接单通知，技师可选择接单或拒单操作。操作简单，一键到位。'},
            ]},
            {img:'static/img/girlIcon.png',val:'技师中心',goodsImg:'static/img/techCenter.png',detailImg:'static/img/techCenter2.png',desArr:[
                {val:'账号情况：展示技师的账号接单状态、累计提现金额、总业绩、接单数等数据，全面掌握。'},
              {val:'奖金明细：平台设置奖励机制，累计奖金金额、本月奖金等数据。'},
              {val:'流程介绍：展示技师的按摩服务流程，奖励规则和违规惩罚规则，确保按摩服务流程顺利。'},
              {val:'守则提示：提供技师守则提示，成就更优秀的技师。'},
              {val:'订单核销功能：输入待服务订单核销码，一键核销，操作简单便捷。'},
            ]},
            {img:'static/img/shopSetIcon.png',val:'技师设置',goodsImg:'static/img/techSet.png',detailImg:'static/img/techSet2.png',desArr:[
                {val:'自定义状态：随时调整上线或休息状态，灵活安排您的接单时间。'},
                {val:'时间选择：自由设定可接单时间，根据个人时间安排，实现时间与效益的完美匹配。'},
                {val:'密码重置：个人中心进行密码重置，确保账号安全。'},
                {val:'关联项目：展示此技师关联的项目情况，技师可自定义自己可服务的项目进行绑定。'},
            ]},
          ]},
          {val:'管理后台',isPc:true,id:2,arr:[
            {img:'static/img/loginIcon.png',val:'后台登录',goodsImg:'static/img/techPCLogin.png',detailImg:'static/img/techPCLogin2.png',desArr:[
                {val:'两种方式登录：管理员登录方式可选择手机号加密码登录或手机号加验证码登录，便捷快速。'},
              {val:'安全保障：采用安全加密技术，保障您的账号信息安全，让您无需担心安全隐私泄露问题，放心使用。'},
              {val:'便捷操作：简洁直观的界面设计，操作简单易上手，管理员可轻松管理按摩平台，高效便捷的管理员权限。'},
            ]},
            {img:'static/img/userIcon.png',val:'用户中心',goodsImg:'static/img/techPCUser.png',desArr:[
                {val:'用户量实时掌握：了解平台用户总人数，洞悉用户规模和增长趋势，助您把握市场动态。'},
              {val:'用户数据展示：展示每位用户的详细信息，从消费习惯到订单情况，助力精准营销。'},
              {val:'用户消费情况：查看每个用户消费的金额，了解用户消费能力，为管理员提供灵活的策划，提升用户满意度。'},
            ]},
            {img:'static/img/orderIcon.png',val:'订单中心',goodsImg:'static/img/techPCOrder.png',detailImg:'static/img/techPCOrder2.png',desArr:[
                {val:'订单列表：清晰展示平台每一笔订单明细。'},
              {val:'订单总览：平台总订单金额和累计提现金额，洞悉平台的收益情况。'},
              {val:'订单查询：可通过日期、状态、审核状态等快速查询订单，查找所需信息，提高效率，节省时间。'},
              {val:'订单详情：订单详情页面展示了每笔订单的详细信息，管理员轻松了解订单的所有详细信息。'},
            ]},
            {img:'static/img/reportIcon.png',val:'举报列表',goodsImg:'static/img/techPCReport.png',desArr:[
                {val:'举报列表：展示平台订单的举报情况，保障平台的安全和公平，让您能够迅速采取相应措施。'},
              {val:'举报处理：处理每一个举报，采取有效措施，确保平台秩序良好。'},
            ]},
            {img:'static/img/girlIcon.png',val:'技师中心',goodsImg:'static/img/techPCTech.png',detailImg:'static/img/techPCTech2.png',desArr:[
                {val:'保洁员列表：展示每一个技师的基本信息，对每一个技师的的情况一目了然，轻松管理。'},
              {val:'快速查询：通过技师名称快速查询到对应的技师，节约时间。'},
              {val:'扣费处理：对违规技师进行扣费处理，确保平台环境的公平和安全。'},
              {val:'技师详情：技师详情页展示了最全信息，包括收益提现等明细，管理员可全面了解每位技师的所以信息。'},
              {val:'便捷管理：新增、编辑技师等操作简单易上手，管理员可便捷的管理。'},
            ]},
            {img:'static/img/moneyIcon.png',val:'提现列表',goodsImg:'static/img/techPCSub.png',detailImg:'static/img/techPCSub2.png',desArr:[
                {val:'提现申请：展示技师的提现申请记录，记录每一笔提现的时间、提现人员、提现金额等信息。'},
              {val:'快速查询：通过提现单号、技师姓名、提现状态等快速查询对应订单，节省时间，提高效率。'},
              {val:'提现处理：可对提现申请进行提现通过和驳回的操作处理。'},
            ]},
            {img:'static/img/packIcon.png',val:'按摩项目',goodsImg:'static/img/techPCLess.png',detailImg:'static/img/techPCLess2.png',desArr:[
                {val:'套餐列表：呈现按摩项目各种套餐列表展示，记录每一个套餐的收益、价格等信息。'},
              {val:'精准搜索：通过套餐名称搜索对应套餐，节省时间。'},
              {val:'灵活管理：管理员可自定义新增、删除、编辑套餐操作，灵活应对按摩平台需求。'},
            ]},
            {img:'static/img/shopOtherSetIcon.png',val:'其他设置',goodsImg:'static/img/techPCSet.png',desArr:[
                {val:'微信客服：配置用户端客服微信，24/7在线解答您的疑问，为用户提供便捷沟通。'},
              {val:'咨询热线：设置客服热线，为用户解决问题，提供贴心的电话支持。'},
              {val:'关于我们：通过关于我们配置，让用户深入了解平台的服务理念，让用户放心选择，信赖本平台。'},
            ]},
            {img:'static/img/bannerIcon.png',val:'轮播图',goodsImg:'static/img/techPCBanner.png',detailImg:'static/img/techPCBanner2.png',desArr:[
                {val:'轮播图列表：展示按摩平台的轮播图。'},
              {val:'便捷管理：通过轮播图新增、删除和编辑设置功能，轻松管理轮播图内容，提升用户体验。'},
            ]},
          ]},
        ],
        rowNavId:0,
        productNavArr:[],
        productNavId:0,
        goodArr:[
          {img:'static/img/upIcon.png',name:'需求量大',des:'随着生活节奏加快和工作压力增大，人们对按摩放松的需求不断增加，尤其是在县城这种人口相对密集但按摩资源较少的地区，市场潜力巨大。'},
          {img:'static/img/downIcon.png',name:'服务缺口',des:'县城按摩店数量有限，且服务品质参差不齐，为同城上门按摩平台提供了广阔的发展空间。'},
          {img:'static/img/bailingIcon.png',name:'忙碌白领',des:'工作繁忙的上班族需要在家中得到放松，而不是额外花时间去按摩店。'},
          {img:'static/img/girlIcon.png',name:'兼职技师',des:'有按摩经验或专业技能的人士，希望通过按摩平台提供服务来增加收入。'},
          {img:'static/img/gexinghuaIcon.png',name:'个性化需求服务',des:'用户对按摩服务的需求不仅仅停留在传统按摩技术上，还希望获得更多个性化的服务，如针对特定部位的深度按摩等。'},
          {img:'static/img/onLineIcon.png',name:'线上预约流行',des:'随着互联网的普及，人们更倾向于通过手机或电脑进行按摩预约，同城上门按摩平台符合这一趋势。'},
        ],
        portArr:[
          {img:'static/img/suduIcon.png',name:'便捷快速',des:'用户可通过平台快速预约按摩服务，享受到上门按摩的便利和舒适。'},
          {img:'static/img/anquanIcon.png',name:'安全可靠',des:'严格审核技师资质，保障用户的身体健康和安全。'},
          {img:'static/img/moneyIcon.png',name:'灵活收费',des:'通过抽取服务费的方式，平台实现盈利，同时给予技师合理收入。'},
          {img:'static/img/diyiIcon.png',name:'独家模式',des:'每个城市只出售给一个创业者，绝对无竞争，让您独享市场红利。'},
        ],
        stepArr:[
        {img:'static/img/number1.png',name:'准备工作',arr:[
          {val:'产品准备：同城按摩线上预约平台软件'},
          {val:'人员准备：兼职技师、招聘兼职传单发放员1～2个'},
          {val:'招聘方式：以线上社群或线下宣传单形式招聘兼职技师'},
          {val:'兼职薪资：兼职薪资按0底薪+80%提成招聘'},
          {val:'场地和时间：无需场地、时间自由、在家可做。'},
        ]},
        {img:'static/img/number2.png',name:'推广安排',arr:[
          {val:'准备按摩宣传单在各网吧、夜宵店发放。'},
          {val:'通过线上社群或朋友圈推广按摩平台。'},
          {val:'网吧、电梯等地方贴按摩海报进行推广'},
        ]},
        {img:'static/img/number3.png',name:'后期工作',arr:[
          {val:'每个星期推一波用户，引导用户在平台下单预约按摩需求。'},
          {val:'兼职技师招聘不断，可一直长期招聘下去，都是0底薪无成本。'},
          {val:'全自动订单派发，监督订单进度，订单结算。只需维护平台安全、正常运作即可，5分钟上手，操作简单。'},
        ]},
        {img:'static/img/number4.png',name:'预算成本',arr:[
          {val:'软件费用：购买《同城按摩》软件，3980元终生版。'},
          {val:'兼职宣传单人员：10元/小时'},
          {val:'宣传单打印：0.1元/张'},
          {val:'微信支付认证300元/年'},
          {val:'域名证书98元/年'},
          {val:'赠送：终生产品维护及搭建，服务器免费使用，海报设计。'},
          {val:'承诺：一城一主，绝无竞争；无后续收费；指导运营。'},
        ]},
        {img:'static/img/number5.png',name:'收益分析',arr:[
          {val:'每完成一单按摩订单，平台抽取20%的平台服务费作为盈利。（可自定义抽成比例）'},
          {val:'技师皆为兼职形式0底薪，完成一单结算一单提成，无需办公地址租赁，没有硬性的支出。'},
          {val:'有订单就有提成盈利，没有订单时候，也没有其他成本支出。'},
        ]},
        {img:'static/img/number6.png',name:'适宜对象',arr:[
          {val:'对同城互联网项目感兴趣的人可做'},
          {val:'作为副业经营的人可做'},
          {val:'同城低投资、轻创业者可做'},
          {val:'对按摩领域项目感兴趣的人可做'},
        ]},
      ],
      };
    },
    props: {},
    methods: {
      navFn(item){
          this.$router.push({path:item.url})
      },
      rowNavFn(item){
        this.rowNavId = item.id
        this.productNavArr = item.arr
        this.productNavId = 0
      },
      productNavFn(index){
        this.productNavId = index
      },
      shopNavFn(index){
        this.shopNavId = index
      },
    },
    mounted() {
        $('html, body').animate({"scrollTop":0},0)
    },
    created() {
      this.productNavArr = this.rowNavArr[0].arr
    }
  };
  </script>
  
  <style scoped lang="less">
  .container{
    width: 100%;
    .headCont{
      min-width: 1200px;
      width: 100%;
      position: fixed;
      z-index: 10;
      left: 0px;
      top: 0px;
      height: 90px;
      // border-radius: 50px;
      background-color: rgba(255, 255, 255, 0.8);  
      display: flex;
      justify-content: space-between;
      padding: 0 50px;
      box-sizing: border-box;
      // box-shadow: 0 0 15px rgb(235,235,235);
      color: #4fc763;
      .logoCont{
        display: flex;
        align-items: center;
        img{
          width: 70px;
          // border-radius: 50%;
          margin-right: 20px;
        }
        .logoText{
          .logoName{
            font-size: 24px;
            font-weight: bold;
            font-family: cursive;
          }
          .logoEng{
            font-family: serif;
            font-size: 18px;
          }
        }
      }
      .navCont{
        display: flex;
        align-items: center;
        .navItem{
          width: 110px;
          box-sizing: border-box;
          font-size: 18px;
          line-height: 90px;
          margin-right: 30px;
          font-weight: bold;
          text-align: center;
          cursor: pointer;
          color: black;
          position: relative;
          transition: all 0.3s linear;
          .navLine,.navLine_no{
              width: 110px;
              height: 3px;
              background-color: #4fc763;
              position: absolute;
              bottom: 10px;
              left: 0;
              border-radius: 2px;
          }
          .navLine_no{
            transition: all 0.3s linear;
            width: 0;
          }
        }
        .navItem:hover .navLine_no{
          width: 110px;
        }
        .navItem:hover{
          color: #4fc763;
        }
        .navItemActive{
          color: #4fc763;
        }
        .telCont{
          .telNum{
            font-size: 20px;
            display: flex;
            align-items: center;
            margin-left: 50px;
            .iconfont{
              font-size: 30px;
              margin-right: 15px;
            }
          }
        }
      }
    }
    
    .bannerCont{
      width: 100%;
      background-color: #e8feeb;
      .bannerMask{
        width: 100%;
        padding: 150px 100px 50px;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
        display: flex;
        color: #4fc763;
        img{
          height: 500px;
        }
        .maskLeft{
          margin-right: 150px;
          .maskTitle{
            font-size: 40px;
            margin-bottom: 20px;
          }
          .maskdes{
            font-size: 24px;
            margin-bottom: 30px;
          }
          .maskVal{
            font-size: 16px;
            p{
              margin: 15px 0;
            }
          }
          .maskBtn{
            margin-top: 50px;
            width: 160px;
            // background-color: #fff;
            color: #4fc763;
            border-radius: 30px;
            line-height: 44px;
            border: 1px solid #4fc763;
            text-align: center;
            cursor: pointer;
            transition: all 0.15s linear;
            display: block;
            text-decoration: none;
          }
          .maskBtn:hover{
            background-color: #4fc763;
            border:1px solid #4fc763;
            color: #fff;
          }
        }
      }
    }
    .productCont{
      width: 90%;
      margin: 50px auto;
      .contName{
        width: 100%;
        text-align: center;
        color: #4fc763;
        .contName_china{
          font-size: 30px;
          font-weight: bold;
        }
        .contName_Eng{
          font-family: serif;
          font-size: 16px;
        }
        .contName_Des{
            margin-top: 10px;
        }
      }
      .productMain{
        margin-top: 50px;
        display: flex;
        .productNav{
          border-radius: 10px;
          overflow: hidden;
          .productNavItem,.productNavItemActive{
            width: 200px;
            padding: 0 15px;
            height: 70px;
            display: flex;
            align-items: center;
            background-color: #4fc763;
            cursor: pointer;
            border-bottom: 1px solid #fff;
            img{
              width: 35px;
              height: 35px;
              margin-right: 15px;
            }
            .productNavName{
              font-size: 18px;
            }
          }
          .productNavItem{
            background-color: #e8feeb;
          }
          .productNavItemActive{
            color: #fff;
          }
        }
        .productSwiper{
          flex: 1;
          width: 200px;
          margin-left: 50px;
          .productItem{
            width: 100%;
            display: flex;
            .phoneBox{
              width: 280px;
              position: relative;
              text-align: center;
              margin-right: 30px;
              img{
                width: 100%;
              }
              .phoneImg{
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
              }
              .productImgCont{
                width: 245px;
                margin: 0 auto;
                overflow: hidden;
                border-radius: 10px;
                margin-top: 10px;
              }
              .productImg{
                width: 100%;
                border-radius: 20px;
              }
            }
            .productInfo{
              flex: 1;
              width: 100px;
              margin-left: 50px;
              .productInfoName{
                font-size: 25px;
              }
              .productInfoDes{
                font-size: 18px;
                margin-top: 30px;
                ul{
                  padding-left: 0;
                  li{
                    margin-bottom: 15px;
                  }
                }
              }
            }
          }
          .PCProduct{
            display:block;
            .PCFlex{
              width: 100%;
              display: flex;
              justify-content: space-between;
              .PCBox{
                width: 48%;
                position: relative;
                .PCImg{
                  width: 100%;
                }
                .PCProductImg{
                  width: 100%;
                  position: absolute;
                  left: 4%;
  
                  font-size: 0;
                  top: 20px;
                  img{
                    width: 92%;
                  }
                }
              }
            }
            .productInfoName{
              font-size: 25px;
              text-align: center;
            }
            .productInfoDes{
              width: 100%;
              ul{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                padding-left: 10px;
                li{
                  margin-bottom: 15px;
                  width: 48%;
                }
              }
            }
          }
        }
      }
      .portCont{
        width: 100%;
        margin-top: 30px;
        // justify-content: space-around;
        background-color: #e8feeb;
        display: flex;
        flex-wrap: wrap;
        .portItem{
          width: 20%;
          margin: 20px 2.5%;
          text-align: center;
          background-color: #fff;
          padding: 15px;
          box-sizing: border-box;
          background-color: #4fc763;
          border-radius: 15px;
          color: #fff;
          overflow: hidden;
          position: relative;
          .portMask{
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            position: absolute;
            background-color: rgba(0, 0, 0, 0.3);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: all 0.3s linear;
            .portBtn{
              width: 150px;
              background-color: #fff;
              color: #4fc763;
              line-height: 40px;
              border-radius: 25px;
              cursor: pointer;
            }
          }
          .portImg{
            width: 100%;
            text-align: center;
            img{
              width: 35%;
            }
          }
          .portName{
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 10px;
          }
          .portDes{
  
          }
        }
        .portItem:hover .portMask{
          opacity: 1;
        }
      }
      .orderStep{
        width: 100%;
        img{
          width: 100%;
  
        }
      }
      .goodCont{
        width: 100%;
        display: flex;
        padding: 30px 50px;
        box-sizing: border-box;
        flex-wrap: wrap;
        .goodItem{
          width: 45%;
          margin: 0 2.5%;
          // background-color: #4fc763;
          padding: 30px;
          box-sizing: border-box;
          border-radius: 15px;
          display: flex;
          align-items: center;
          margin-bottom: 30px;
          .goodImg{
            width: 100px;
          }
          // color: #fff;
          .goodText{
            margin-left: 30px;
            color: #666;
            .goodName{
              font-size: 24px;
              margin-bottom: 15px;
              display: flex;
              align-items: center;
              color: #4fc763;
              .goodLine{
                width: 3px;
                height: 24px;
                background-color: #4fc763;
                border-radius: 2px;
                margin-right: 10px;
              }
            }
          }
        }
      }
      .stepCont{
      width: 100%;
      display: flex;
      margin-top: 20px;
      flex-wrap: wrap;
      .stepItem{
        width: 27%;
        margin: 30px 2%;
        box-sizing: border-box;
        display: flex;
        .stepImg{
          width: 60px;
          height: 60px;
          font-size: 0;
          border-radius: 50%;
          background-color: #4fc763;
          justify-content: center;
          display: flex;
          align-items: center;
          margin-right: 15px;
          img{
            width: 70%;
          }
        }
        .stepInfo{
          width: 10px;
          flex: 1;
          .stepName{
            font-size: 24px;
            font-weight: bold;
            line-height: 60px;
          }
          ul{
            padding-left: 0;
            li{
              margin-bottom: 10px;
            }
          }
        }
      }
    }
    .sendCont{
        display: flex;
        width: 100%;
        margin: 30px auto;
        background-color: #e8feeb;
        padding: 15px;
        // justify-content: space-between;
        box-sizing: border-box;
        border-radius: 5px;

        .inputCont{
            background-color: #fff;
            padding: 15px 15px;
            box-sizing:border-box;
            border-radius: 5px;
            flex: 1;
            margin-right: 20px;
            input{
                width: 100%;
                background: none;
                border: none;
                outline: none;
                color: #4fc763;
            }
        }
        .subBtn{
            line-height: 54px;
            width: 180px;
            text-align: center;
            background-color:#4fc763;
            color: white;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s linear;
        }
        .subBtn:hover{
            opacity: 0.7;
        }
      }
    }
    .rowNavCont{
      display: flex;
      width: 900px;
      margin: 30px auto;
      justify-content: center;
      line-height: 60px;
      position: relative;
      .rowNavItem{
        width:300px;
        text-align: center;
        font-weight: bold;
        cursor: pointer;
        font-size: 20px;
        transition:all 0.3s linear;
        // color: #666;
      }
      .rowNavActive{
        color: #fff;
      }
      .rowNavLine{
        position: absolute;
        width: 300px;
        left: 0;
        bottom: 0;
        height: 60px;
        background-color: #4fc763;
        border-radius: 2px;
        transition:all 0.3s linear;
        z-index: -1;
        border-radius: 30px;
      }
    }
    .hasBg{
      background-color: #e8feeb;
      padding: 50px 0;
      border-radius: 15px;
    }
    
  }
  </style>
  